<template>
    <div>
        <Export ref="exportExcel" file-name="导出" :columns="state.columns" :data="state.data" />
        <!-- ref导出 -->
        <button style="width: 200px; height: 100px" @click="exportExcel.exportByColumns()">导出byColumns</button>
    </div>
</template>

<script lang="ts">
export default { name: 'ExcelExport' }
</script>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue'

import Export from '@/components/exceljsExport/index.vue'
import { data } from './data'

const exportExcel = ref()
const state = reactive({
    // 若列中未定义"width"，则自动计算高度，或者设置列属性"exportAutoWidth"也会自动计算高度，优先级高于"width"
    columns: [{ label: '目录', prop: 'text' }],
    data,
})

const fn = () => {
    const menuContainer = document.querySelector('.outline-container')
    const result = []
    Array.from(menuContainer.querySelectorAll('.headline')).forEach((dom) => {
        const style = {}
        Array.from(dom.children[1].style).forEach((key) => {
            style[key] = dom.children[1].style[key]
        })
        result.push({
            // dom: dom.children[1],
            text: dom.children[1].innerText,
            // style,
        })
    })
    console.log(result)
}
onMounted(() => {})

// defineExpose({

// })
// <style lang="scss" scoped>

// </style>
</script>
